<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<link rel="stylesheet" href="../iconfont/iconfont.css">

		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}

			#mapPage {
				height: 100%;
				position: relative;
			}

			#container {
				height: 100%;

			}

			.main {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 9999;
			}

			.heightNav {
				height: 44px;
				background-color: #fff;
			}

			.searchBox {
				height: 54px;
				background-color: #fff;
				display: flex;
				justify-content: center;
				padding: 0 15px;
			}

			.roundSearch {
				flex: 1;
				height: 32px;
				background-color: #F7F8FA;
				border-radius: 16px;
				display: flex;
			}

			.cancleBtn {
				margin-left: 14px;
				color: #000000;
				font-size: 14px;
				height: 32px;
				line-height: 32px;
			}

			.selector {
				width: 80px;

				padding: 0 15px;
				box-sizing: border-box;
				height: 100%;
				/* 			background-color: red; */
				font-size: 14px;
				font-weight: 400;
				color: #272636;
				display: flex;
				align-items: center;
			}

			.input {
				border: none;
				background-color: #F7F8FA;
				outline-style: none;
			}

			.icon-below-s {
				margin-left: 9px;
				color: #000;
				font-size: 12px;
			}
		</style>
	</head>
	<body>

		<div id="mapPage">
			<div id="container"></div>
			<div class="main">
				<div class="heightNav"></div>
				<div class="searchBox">
					<div class="roundSearch">
						<div class="selector">
							<div>重庆</div>
							<i class="iconfont icon-below-s"></i>
						</div>
						<!-- 	<div>
							<input class="input" type="text" placeholder="从哪里装？" id="input">
							<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;
							 height:auto; display:none;"></div>
						</div> -->

						<input class="input" type="text">
					</div>
					<div class="cancleBtn">取消</div>
				</div>
			</div>
		</div>


	</body>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
	<script type="text/javascript">
		var map = new BMapGL.Map("container"); // 创建地图实例 
		var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 
		map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	</script>
</html>